<template>
  <div
    class="pullRefresh"
    @touchstart="onStart"
    @touchmove="onMove"
    @touchend="onEnd"
    @touchcancel="onEnd"
  >
    <div class="wrapper" :style="wrapperStyle">
      <div class="status">{{ status }}</div>
      <ul class="list">
        <li v-for="d in list" :key="d">{{ d }}</li>
      </ul>
    </div>

  </div>
</template>
<script>
const ajax = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(new Array(5).fill(0).map(() => Math.random()));
    }, Math.random() * 2000);
  });
};

// 顶部文字 “下拉加载” 默认是隐藏的
// 往下拖动时，列表下移，顶部文字跟随着下移
// 如果下移距离超过阈值/触发距离，顶部文字变成 ”释放加载“，此时放开手指，文字变成 “正在加载”，请求数据接口，接口请求成功后，文字恢复默认，并且将顶部隐藏

export default {
  data() {
    return {
      loading: false,
      list: [],
      // 触摸点 y 方向的位置坐标
      startY: 0,
      endY: 0,
      y: 0, // 下拉的距离

      transitionDuration: '0s'
    };
  },
  computed: {
    status() {
      if (this.loading) return '正在加载';
      if (this.y > 50) return '释放加载';
      return '下拉加载';
    },
    wrapperStyle() {
      return {
        transform: `translateY(${this.y}px)`,
        'transition': this.transitionDuration
      };
    }
  },
  methods: {
    ease(n, limit) {
      if (n > limit) {
        if (n < limit * 2) {
          n = limit + (n - limit) / 2;
        } else {
          n = limit * 1.5 + (n - limit * 2) / 4;
        }
      }
      return n;
    },
    getList() {
      this.loading = true;
      return ajax().then((data) => {
        this.list = data;
        this.loading = false;
      });
    },
    onStart(e) {
      if (this.loading || window.pageYOffset > 0) return;
      this.startY = e.touches[0].clientY;
    },
    onMove(e) {
      console.log(window.pageYOffset)
      this.transitionDuration = '0s'
      // 先判断是不是在页面未发生滚动时
      if (this.loading || window.pageYOffset > 0) return;
      console.log(window.pageYOffset)

      // 如果已经发生拖动，禁用默认的页面滚动
      if (this.y > 0) e.preventDefault();

      // const limit = (n) => Math.max(Math.min(100, n), 0);

      this.endY = e.touches[0].clientY;
      this.y = this.ease(Math.max(this.endY - this.startY, 0), 50);
    },
    onEnd() {
      this.transitionDuration = '0.3s'
      if (this.y > 50) {
        this.y = 50;
        this.getList().then(() => {
          this.y = 0;
        })
      } else {
        this.y = 0;
      }
    },
  },
  mounted() {
    this.getList();
  },
};
</script>

<style lang="sass">
body
  height: 3000px
.pullRefresh
  text-align: center
  overflow: hidden
  .wrapper
    position: relative
  .status
    position: absolute
    top: -50px
    width: 100%
    line-height: 50px
  .list
    max-width: 500px
    margin: 0 auto
    li
      line-height: 50px
      &:nth-child(odd)
        background: #f0c0f0
      &:nth-child(even)
        background: #c0f0c0
</style>
